<template>
	<div ref="edition" class="edition" @click="show_wang_content">
		<div ref="wang_menu"  class="wang_menu"></div>
		<div ref="wang_content"  class="wang_content"></div>
	</div>
</template>

<script>
	import E from 'wangeditor'
	//import { fileUpload,Login} from '../assets/util/api.js'
  export default {
  	name:"Editor",
    data() {
      return {
      	editionstate:0,
      	editor:"",
      	editorContent:"",
      };
    },
    props:{
    	active:{
    		name:"",
    		value:""
    	},
    	name:"",
    	baseheight:0,
    	clear:false,
    },
    mounted(){
    	var _this = this;
    	if(this.editionstate === 0){
    		var editor = new E(this.$refs.wang_menu,this.$refs.wang_content)
	        editor.customConfig.onchange = (html) => {
	          _this.editorContent = html
	        }
	        editor.customConfig.zIndex = 10;
	        editor.customConfig.uploadImgShowBase64 = true
	        editor.create();
	        this.editor = editor;
	        ++this.editionstate
	        this.editor.txt.html(this.active.value.value);
			this.editorContent = this.editor.txt.html();
	        this.$refs.wang_menu.style.display = "none";
	    	this.$refs.wang_content.style.paddingTop="0px";
			this.$refs.edition.style.height = this.baseheight + "px";
    	}
    },
    watch:{
    	active(newValue,oldvalue){
    		if(!this.clear){
    			this.hideContent();
    		}else{
    			this.clearEdition();
    		}
    		
	　　	},
		baseheight(val,val1){}
    },
    methods: {
       show_wang_content(){
	       	if(this.active.name == this.name && !this.active.value.state){
			    this.$emit("childChangState",{'name':this.name,'active':{'state':true}})
	       	}else{}
       },
       hideContent(){
       		if(this.active.name == this.name && this.active.value.state){
	    		this.$refs.wang_menu.style.display = "flex";
			    this.$refs.edition.style.height = "258px";
			    this.$refs.wang_content.style.paddingTop="31px";
	    	}else{
	    		this.$refs.wang_menu.style.display = "none";
	    		this.$refs.wang_content.style.paddingTop="0px";
			    this.$refs.edition.style.height = this.baseheight + "px";
	    	}
	    	this.$emit("allEditorData",{name:this.name,data:this.editorContent})
       },
       clearEdition(){
       		this.editor.txt.html(this.active.value.value);
			this.editorContent = this.editor.txt.html();
       }
    }
  }
 
</script>
<style lang="scss">
  .edition{
  	position: relative;
  	height: 85px;
  	border: 1px solid #ccc;
  	.wang_menu{
  		top: 0;
  		left: 0;
  		position: absolute;
  		display: none;
  	}
  	.wang_content{
  		position:absolute;
  		left: 0;
  		top: 0;
  		bottom: 0;
  		right: 0;
  	}
  	.w-e-text{
  		/*padding-top:31px;*/
  		overflow-y: auto;
  		color: #000;
  	}
  }
</style>

